<template>
  <div v-if="detail[0]">
    <PageTitle title="订单详情"></PageTitle>
    <el-steps :active="orderStep" align-center>
      <el-step title="买家下单" :description="detail[0].create_at"></el-step>
      <el-step title="买家付款" :description="detail[0].pay_date"></el-step>
      <el-step title="商家发货" :description="detail[0].number"></el-step>
      <el-step title="订单完成" :description="detail[0].updata_at"></el-step>
    </el-steps>
    <div class="content">
      <div class="box">
        <div>
          <h3>订单编号</h3>
          <h4>{{ detail[0].order_code }}</h4>
        </div>
        <div>
          <h3>付款方式</h3>
          <h4>微信支付</h4>
        </div>
        <div>
          <h3>配送方式</h3>
          <h4>快递</h4>
        </div>
        <div>
          <h3>收货人</h3>
          <h4>{{ detail[0].addressname }}</h4>
        </div>
        <div>
          <h3>联系方式</h3>
          <h4>{{ detail[0].mobile }}</h4>
        </div>
        <div>
          <h3>收货地址</h3>
          <h4>{{ detail[0].province }} {{ detail[0].city }} {{ detail[0].district }} {{ detail[0].address }}</h4>
        </div>
        <div>
          <h3>买家留言</h3>
          <h4>{{ detail[0].remark }}</h4>
        </div>
        <!-- <div class="editAddress">
          <el-button type="primary" size="small" @click="dialogAddress = true">修改订单收货信息</el-button>
        </div>-->
      </div>
      <div class="box">
        <div>
          <h3>订单状态</h3>
          <template v-if="detail[0].pay == 1">
            <h4 class="color-info">{{ orderStatus.title }}</h4>
          </template>
          <template v-else-if="detail[0].ship == 2">
            <h4 class="color-danger">{{ orderStatus.title }}</h4>
          </template>
          <template v-else-if="detail[0].ship == 4">
            <h4 class="color-success">{{ orderStatus.title }}</h4>
          </template>
          <template v-else-if="detail[0].ship == 5">
            <h4 class="color-theme">{{ orderStatus.title }}</h4>
          </template>
          <template v-else-if="detail[0].ship == 6">
            <h4 class="color-danger">{{ orderStatus.title }}</h4>
          </template>
        </div>
        <div v-if="orderStatus.status != 4 && orderStatus.status != 5 && orderStatus.status != 2">
          <h3>倒计时</h3>
          <Timeout :time="orderStatus.time" :desc="orderStatus.desc" />
        </div>
        <div>
          <h4>
            <el-button
              type="primary"
              size="small"
              @click="dialogExpress = true"
              v-if="detail[0].pay == 2 && detail[0].ship == 2"
            >确认发货</el-button>
            <el-button type="primary" size="small" @click="dialogProg = true" v-if="logis">查看物流</el-button>
          </h4>
        </div>
        <div>
          <h4>
            <p class="color-info">如果无法进行发货，请及时联系卖家进行妥善处理</p>
          </h4>
        </div>
        <div v-if="detail[0].pay == 2 && detail[0].ship != 2">
          <el-button type="primary" @click="dialogExpress = true">修改</el-button>
        </div>
      </div>
    </div>
    <PageTitle title="商品信息"></PageTitle>
    <el-table stripe :data="detail">
      <el-table-column prop="name" label="商品名称"></el-table-column>
      <el-table-column label="商品图片">
        <template slot-scope="scope">
          <img
            class="list-img"
            :src="scope.row.url"
            :alt="scope.row.url"
            @click="handlePictureCardPreview(scope.row.url)"
          />
        </template>
      </el-table-column>
      <el-table-column prop="price" label="商品价格(元)"></el-table-column>
      <el-table-column prop="order_num" label="数量"></el-table-column>
      <el-table-column prop="state" label="状态">
        <template slot-scope="scope">
          <span class="color-info" v-if="scope.row.payment_status == 1">待付款</span>
          <span class="color-danger" v-else-if="scope.row.shipping_status == 2">待发货</span>
          <span class="color-theme" v-else-if="scope.row.shipping_status == 3">退货中</span>
          <span class="color-success" v-else-if="scope.row.shipping_status == 4">已完成</span>
          <span class="color-theme" v-else-if="scope.row.shipping_status == 5">退货申请中</span>
          <span class="color-danger" v-else-if="scope.row.shipping_status == 6">待收货</span>
          <span class="color-success" v-else-if="scope.row.shipping_status == 7">已退货</span>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" />
    </el-dialog>
    <el-dialog :visible.sync="dialogAddress">
      <el-form :model="formAddress" :rules="rulesAddress" label-width="80px">
        <el-form-item label="收货人" prop="user">
          <el-input v-model="formAddress.user" placeholder="填写收货人"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="formAddress.mobile" placeholder="填写手机号"></el-input>
        </el-form-item>
        <el-form-item label="详细地址" prop="address">
          <el-input v-model="formAddress.address" placeholder="填写详细地址"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addressSubmit">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog :visible.sync="dialogExpress">
      <InputLogis @close="dialogExpressClose" :detail='detail' :modify='modify' />
    </el-dialog>
    <el-dialog :visible.sync="dialogProg">
      <Logistics v-if="logis" :logis="logis" />
    </el-dialog>
  </div>
</template>

<script>
import PageTitle from "@/components/pageTitle/PageTitle.vue";
import Timeout from "@/components/timeout/Timeout.vue";
import InputLogis from "@/components/inputLogis/InputLogis.vue";
import Logistics from "@/components/logistics/Logistics.vue";
import _ from "lodash";
export default {
	name: "OrderDetail",
	components: {
		PageTitle,
		Timeout,
		Logistics,
		InputLogis,
	},
	activated() {
		this.$goTop();
		this._get();
		
	},
	deactivated() {
		this.$destroy();
	},
  	data() {
		return {
			modify:null,//修改发货
			dialogImageUrl: "",
			dialogVisible: false,
			dialogAddress: false,
			dialogExpress: false,
			dialogProg: false,
			formAddress: {
				user: "",
				mobile: "",
				address: "",
			},
			rulesAddress: {
				user: [{ required: true, message: "请输入收件人", trigger: "blur" }],
				mobile: [
				{ required: true, message: "请输入手机号", trigger: "blur" },
				{
					validator(rule, value, callback) {
					const boolean = new RegExp(/^1(3|4|5|6|7|8|9)\d{9}$/).test(value);
					if (!boolean) {
						return callback(new Error("请正确填写手机号"));
					}
					return callback();
					},
					trigger: "blur",
				},
				],
				address: [
				{ required: true, message: "请输入收货地址", trigger: "blur" },
				],
			},
			detail: [],
			tableData: [],
			logis: "",
		};
	},
	mounted(){
		
	},
  	computed: {
    	orderStatus() {
			let status = "";
			let title = "";
			let desc = "";
			let time = "";
      		// this.detail.forEach(item => {
			if (this.detail[0].pay == 1) {
				status = 1;
				title = "未付款";
				desc = "后不付款订单自动取消";
				time = this.detail[0].payment_endtime;
			}
      		if (this.detail[0].pay == 2) {
				if (this.detail[0].ship == 2) {
					status = 2;
					title = "待发货";
					desc = "后商家不发货,会重新安排新的商家发货,请耐心等待";
					time = this.detail[0].not_endtime;
				}
				if (this.detail[0].ship == 4) {
					status = 4;
					title = "订单已完成";
					desc = "";
					time = "";
				}
				if (this.detail[0].ship == 5) {
					status = 5;
					title = "退货申请中";
					desc = "";
					time = "";
				}
				if (this.detail[0].ship == 6) {
					status = 2;
					title = "待收货";
					desc = "后自动确认收货";
					time = this.detail[0].confirm_endtime;
				}
      		}
      			// })
      		return { status, title, desc, time };
    	},
		orderStep() {
			let step = [
				this.detail[0].create_at,
				this.detail[0].pay_date,
				this.detail[0].number,
				this.detail[0].updata_at,
			];
			let count = 0;
			step.forEach((item) => {
				if (item) {
				count++;
				}
			});
			return count;
		},
  	},
  	methods: {
    	async _get() {
      		let {data: { code, data },} = await this.$axios({
        		url: this.$api + "/v1/merchant/pdetails",
        		method: "GET",
				params: {
					order_code: this.$route.params.id,
				},
      		});
      		if (code === 0) {
				this.detail = data;
				if (this.detail[0].shipping_status != "2") {
					this.getLogistics(this.detail[0].com, this.detail[0].num);
					if (this.detail[0].pay == 2 && this.detail[0].ship != 2) {
						this.modify = '/v1/merchant/modify'
					}
				}
      		}
    	},
    	async getLogistics(com, num) {
      		let {data: { code, data },} = await this.$axios({
				url: this.$api + "/v1/fication/up",
				method: "GET",
				params: {
					com,
					// num: '3950055201640'
					num,
				},
      		});
      		if (code === 0) {
        		if (Array.isArray(data)) {
					let logisArr = data[0].data.map((item) => {
						item.day = item.time.substring(5, 10);
						item.time = item.time.substring(11, 16);
						return item;
					});
					this.logis = {
						com: data[0].com,
						num: data[0].nu,
						logisArr,
					};	
				} else {
					this.logis = data;
				}
      		}
    	},
    	addressSubmit: _.throttle(
      		function () {
        		this.$refs.ruleForm.validate(async (valid) => {
					if (!valid) {
						return false;
					}

					let {data: { code, data, msg },} = await this.$axios({
						url: "",
						method: "post",
						data: {
							class_name: this.ruleForm.class_name,
						},
          			});

          			if (code == 0) {
						this.$message({
							type: "success",
							message: "操作成功",
						});
						setTimeout(() => {
							this.$router.go(-1);
						}, 2000);

          			} else {
						this.$message({
							type: "warning",
							message: msg,
						});
          			}
        		});
			  },2000,{trailing: false,
			}
		),
	
		dialogExpressClose() {
			this._get();
			this.dialogExpress = false;
		},
		handlePictureCardPreview(src) {
			this.dialogImageUrl = src;
			this.dialogVisible = true;
		},
  	},
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/base.scss";
.content {
  display: flex;
  margin-top: 20px;
  border: 1px solid #eee;
  .box {
    flex: 1;
    padding: 10px;
    height: 400px;
    border-right: 1px solid #eee;
    &:last-child {
      border-right: none;
    }
    div {
      display: flex;
      align-items: center;
      h3 {
        flex: 0 0 70px;
        margin: 4px;
        width: 100px;
        font-size: 14px;
        font-weight: 400;
        color: $colorInfo;
      }
      h4 {
        flex: 1;
        margin: 4px;
        font-size: 14px;
        font-weight: 400;
        &.color-danger {
          font-size: 18px;
        }
      }
    }
    .editAddress {
      margin-top: 10px;
    }
  }
}
.list-img {
  width: 80%;
  height: 60px;
  cursor: pointer;
}
</style>
